<template>
  <el-card class="box-card" v-loading="loading">
    <div slot="header" class="clearfix">
      <span>会员资料</span>
    </div>
    <el-form :model="memberDetail" ref="memberDetail">
      <el-table border :data="[memberDetail]" class="el-table-align-center">
        <el-table-column width="120" label="姓名">
          <template slot-scope="{row}">
            {{row.reallyName}}
          </template>
        </el-table-column>
        <el-table-column prop="levelName" width="100" label="玩家层级">
        </el-table-column>
        <el-table-column props="status" width="100" label="状态">
          <template slot-scope="{row,$index}">
            <member-status-tag :status="row.status"/>
          </template>
        </el-table-column>
        <el-table-column props="parentName" label="上级代理">
          <template slot-scope="{row}">
            {{row.parentName}}
          </template>
        </el-table-column>
        <el-table-column props="telephone" width="150" label="手机号码">
          <template slot-scope="{row}">
            <el-form-item prop="telephone" v-if="editAble" :required="false">
              <el-input v-model="row.telephone" auto-complete="off"></el-input>
            </el-form-item>
            <div v-else>{{row.telephone}}</div>
          </template>
        </el-table-column>
        <el-table-column props="birthday" width="180" label="出生日期">
          <template slot-scope="{row}">
            {{row.birthday}}
          </template>
        </el-table-column>
        <el-table-column label="性别">
          <template slot-scope="{row}">
            <span v-if="row.sex == 1">男</span>
            <span v-else-if="row.sex == 2">女</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column props="email" width="180" label="邮箱" :required="false">
          <template slot-scope="{row}">
            <el-form-item prop="email" v-if="editAble">
              <el-input v-model="row.email" auto-complete="off"></el-input>
            </el-form-item>
            <div v-else>
              {{ row.email}}
            </div>
          </template>
        </el-table-column>
        <!--<el-table-column props="address" width="200" label="地址">-->
        <!--<template slot-scope="{row}">-->
        <!--<el-form-item prop="address" v-if="editAble" :required="false">-->
        <!--<el-input v-model="row.address" auto-complete="off"></el-input>-->
        <!--</el-form-item>-->

        <!--<div v-else>{{row.address}}</div>-->
        <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column prop="registerDate" width="180" label="注册时间">
          <template slot-scope="scope">
            {{memberDetail.registerDate | toTime}}
          </template>
        </el-table-column>
        <el-table-column prop="registerIp" width="150" label="注册IP">
        </el-table-column>
        <el-table-column prop="registerDomain" width="150" label="注册地址">
        </el-table-column>
        <el-table-column prop="clientType" width="150" label="注册端">
          <template slot-scope="{row}">
            {{row.clientType | toConverter('DEVICE_TYPE')}}
          </template>
        </el-table-column>
        <el-table-column label="上次登录时间" align="center"  width="200">
        <template slot-scope="{row}">
          {{row.loginTime | toTime}}
        </template>
      </el-table-column>
      </el-table>
    </el-form>
  </el-card>
</template>

<script>
  import { getMemberDetail } from '@/services/api/member'
  import MemberStatusTag from '@/components/MemberStatusTag'
  import {form} from '@/build';
  import ApplyDialog from "@/views/member/list/applyDialog";
  export default {
    name: "member-info-card",
    props: {
      'member-id':{
        type: Number
      },
      //切换成带输入可编辑状态
      'edit-able':{
        type: Boolean,
        default: false
      }
    },
    mixins:[form],
    components:{ApplyDialog, MemberStatusTag},
    data(){
      return{
        memberDetail: {},
      }
    },
    mounted(){
      const phoneShowPartial = this.roleCheck('phone-show-partial');
      const phoneShowAll = this.roleCheck('phone-show-all');
      const emailShowPartial = this.roleCheck('email-show-partial');
      const emailShowAll = this.roleCheck('email-show-all');
      this.bindGet(getMemberDetail,'memberDetail',{
        sendingData: {userId: this.$store.state.member.member_id},
        format:data => {
          data.telephone = _.formatUserPhoneEmail(data.telephone,phoneShowPartial,phoneShowAll);
          data.email = _.formatUserPhoneEmail(data.email,emailShowPartial,emailShowAll);
          return data;
        }
      });
      this.getAll();
    },
    methods:{
      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$store.commit(types.SHOW_APPLY_MODAL,{data:this.memberDetail,from:'memberInfo'})

            // updateMemberInfo(this.memberDetail).then(([result,data])=>{
            //   if(result){
            //     this.$message({
            //       message: data.msg,
            //       type: 'success'
            //     })
            //   }
            // })
          }else {
            return false;
          }
        })
      }
    }

  }
</script>

<style scoped>
  .edit-input {
    padding-right: 100px;
  }

  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }
</style>
